<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" :width="700" :defaultFullscreen="true" :canFullscreen="false">
    <section class="card-list">
      <div class="card" v-for="(item, index) in extensions" :key="index">
        <div class="card-main">
          <div class="card-head">
            <img :src="item.img" alt="" class="card-image" />
            <div class="btns">
              <a-button type="primary" class="common-btn" @click="handleAdd(item)">新增</a-button>
            </div>
          </div>
          <p class="card-name">{{ item.protocolType }}</p>
          <p class="card-row">{{ item.desc }}</p>
        </div>
      </div>
    </section>
    <ProtoItemModal @register="registerModal1" @success="reload" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { extensions } from './protocol.data';
  import ProtoItemModal from './ProtoItemModal.vue';
  import { useModal } from '/@/components/Modal';
  const [registerModal1, { openModal }] = useModal();
  const isUpdate = ref(true);
  //表单赋值
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false, showOkBtn: false });
    isUpdate.value = !!data?.isUpdate;
  });
  //设置标题
  const getTitle = computed(() => (!unref(isUpdate) ? '新增协议' : '编辑协议'));

  function handleAdd(record) {
    openModal(true, {
      record,
      isUpdate: true,
      showFooter: true,
    });
  }
</script>
<style scoped>
  p {
    margin: 0;
  }
  .card-list {
    display: flex;
    flex-wrap: wrap;
  }
  .card-list .card {
    flex: 0 0 390px;
    height: 150px;
    border-radius: 8px;
    position: relative;
    margin: 0 16px 16px 0;
    overflow: hidden;
  }
  .card-list .card .card-main {
    background: #f5f8fa;
    padding: 16px;
    height: 100%;
  }
  .card-list .card .card-main .card-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    font-weight: 700;
  }
  .card-list .card .card-main .card-head .card-image {
    width: 0;
    height: 44px;
    flex: 0 0 40px;
    border-radius: 4px;
  }
  .card-list .card .card-main .card-head .btns {
    padding-top: 12px;
  }
  .common-btn {
    border-radius: 18px;
  }
  .card-list .card .card-main .card-name {
    font-size: 15px;
    font-weight: 600;
    color: #0b1e42;
    margin-top: 9px;
  }
  .card-list .card .card-main .card-row {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #788aa0;
  }
</style>
